<template>
	<div class="personal_header">
		<app-header :titleShow="titleShow" :qrShow="qrShow"></app-header>
		<img :src="portrait ? portrait : '../assets/avatar.svg'" alt="" class="avatar">
		<div class="name" v-text="name">花花草草</div>
	</div>
</template>
<script>
	import AppHeader from './header.vue'
	export default {
		name: 'PersonalHeader',
		props: ['name', 'portrait'],
		data: function () {
			return {
				titleShow: false,
				qrShow: false
			}
		},
		components: { AppHeader }
	}
</script>
<style lang="less">
  @gradientStart: #acbefe;
  @gradientEnd: #6fcdff;
	.personal_header {
		padding: 12px 16px 0;
		height: 184px;
		background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@gradientStart), to(@gradientEnd));
		text-align: center;
		box-shadow: 0px 0px 8px #999;
		margin-bottom: -5px;
		.avatar {
			width: 88px;
			margin-top: 25px;
		}
		.name {
			color: white;
			font-size: 14px;
		}
	}
</style>